<script setup>
  import { ref } from 'vue'
  import { createPayInfoApi, getConsultInfoApi } from '@/server/consult'
  import { patientInfoStore } from '@/store/patient.js'
  import { patientInfoApi } from '@/server/patient'

  // 获取就诊参数
  const { illnessDescInfo, illnessInfo, patidentId, illnessValue } =
    patientInfoStore()

  // 是否显示页面信息
  const isConsultShow = ref(false)
  // 获取就诊信息
  const consultInfo = ref({})
  // 获取单个患者详情
  const patientInfo = ref({})

  async function getConsultPayInfo() {
    const { data } = await getConsultInfoApi({
      type: illnessDescInfo.type,
      illnessType: illnessDescInfo.illnessType,
    })
    consultInfo.value = data.data

    const { data: patientData } = await patientInfoApi(patidentId)
    patientInfo.value = patientData.data

    // 显示页面信息
    isConsultShow.value = true
  }

  getConsultPayInfo()

  // 弹出层组件
  const customPayPrpRef = ref(null)
  // 点击立即支付创建订单
  const createPayId = ref('')
  async function onCreatePayInfofn() {
    if (createPayId.value)
      return uni.utils.toast('该订单已创建，请勿重复创建！')
    // 图片修改
    illnessInfo.pictures = illnessInfo.pictures.map(({ url, uuid }) => {
      return {
        url,
        id: uuid,
      }
    })
    // 发起创建订单请求
    const { data } = await createPayInfoApi({
      type: illnessDescInfo.type,
      illnessType: illnessDescInfo.illnessType,
      patientId: patidentId,
      depId: illnessDescInfo.depId,
      illnessDesc: illnessInfo.illnessDesc,
      illnessTime: illnessInfo.illnessTime,
      consultFlag: illnessInfo.consultFlag,
      pictures: illnessInfo.pictures,
    })

    createPayId.value = data.data.id
    // 将订单id传递给弹出层

    // 弹出层
    customPayPrpRef.value.open()
  }

  // 弹出层支付方式
  const payInfoList = [
    { title: '微信支付', thumb: '/static/images/wechatpay-icon.png' },
    { title: '支付宝支付', thumb: '/static/images/alipay-icon.png' },
  ]

  // 关闭弹出层
  function onClosePayPopfn() {
    customPayPrpRef.value.close()
  }

  console.log('支付宝测试账号：scobys4865@sandbox.com ')
</script>

<template>
  <scroll-page v-if="isConsultShow">
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊${consultInfo.actualPayment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${consultInfo.couponDeduction.toFixed(2)}`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red"
                >-¥{{ consultInfo.pointDeduction.toFixed(2) }}</view
              >
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red"
                >¥{{ consultInfo.payment }}.00</view
              >
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        title="患者资料"
      >
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientInfo.name }} | {{ patientInfo.genderValue }} |
                {{ patientInfo.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            border
            title="病情描述"
            :note="illnessInfo.illnessDesc"
          />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ consultInfo.payment.toFixed(2) }}</text>
      </view>
      <button @click="onCreatePayInfofn" class="uni-button">立即支付</button>
    </view>
  </scroll-page>
  <custom-payPop
    :payment="consultInfo.payment"
    :payInfoList="payInfoList"
    :orderId="createPayId"
    payCallbackVal="http://localhost:5173/#/subpack_consult/room/room"
    @closePayPopfn="onClosePayPopfn"
    ref="customPayPrpRef"
  ></custom-payPop>
</template>

<style lang="scss">
  @import './index.scss';
</style>
